<template>
  <div class="hospital-list">
    <div class="hospital-list-wrap">
      <AreaScreen :father-active="city" @city="getCity" />
      <Screen :highlight="filters" @classId="getData" />
      <div class="hospital-list-content">
        <div v-customLoading="loading">
          <div v-if="hospitalData.length" class="hospital-list-content-left">
            <div
              v-for="item in hospitalData"
              :key="item.user_id"
              class="hospital-list-content-item"
            >
              <Hospital :hospital-datas="item" />
            </div>
            <Pager
              :page-config="pageConfig"
              :home-tab-name="classId"
              :city="city"
              @changeCurrentPage="changeCurrentPage"
            />
          </div>
          <div
            v-if="hospitalData.length===0"
            class="hospital-noData"
          >
            <div class="hospital-noData-content">
              <img
                src="~assets/img/no-date.png"
                alt=""
              >
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>

        <div class="hospital-list-content-right">
          <div class="hospital-list-content-hospital">
            <div class="hospital-list-contetn-hospital-title">
              <div class="hospital-list-content-hospital-left">
                <div class="hospital-list-content-hospital-left-icon" />
                <div class="hospital-list-content-hospital-left-text">
                  机构榜
                </div>
              </div>
              <div class="hospital-list-content-hospital-right">
                <div class="hospital-list-content-hospital-right-text">
                  <!-- 更多 -->
                </div>
                <div class="hospital-list-content-hospital-right-icon" />
              </div>
            </div>
            <div
              v-for="item in hospitalRanking"
              :key="item.user_id"
            >
              <nuxt-link :to="`/hospital/${item.user_id}`">
                <div class="hospital-list-content-hospital-item" :style="{background: `url('${item.user_photo ? item.user_photo : ''}') center center no-repeat`,backgroundSize:'100% 100%'}" />
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AreaScreen from '@/components/areaScreen'
import Screen from '@/components/screen'
import Hospital from '@/components/hospital'
import { getHospitalRanking, getHospitalList } from '@/api/hospital'
import Pager from '@/components/pagerTwo'
export default {
  components: {
    AreaScreen,
    Screen,
    Hospital,
    Pager
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [hospitalRanking, hospitalDataMate] = await Promise.all([
      getHospitalRanking('intelligent', 'desc', 1, 8).then(res => {
        return res.data
      }),
      getHospitalList('', 'intelligent', 'desc', 1, 5).then(res => {
        return res
      })
    ])
    return {
      hospitalRanking,
      hospitalDataMate
    }
  },
  data() {
    return {
      city: '',
      classId: '',
      className: '',
      hospitalData: [],
      filters: {},
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        pageTotal: 0
      },
      area: {
        user_area: '',
        user_business: ''
      },
      loading: false,
      projectName: ''
    }
  },
  created() {
    this.pageConfig.total = this.hospitalDataMate.meta.total
    this.pageConfig.pageTotal = this.hospitalDataMate.meta.last_page
    this.hospitalData = this.hospitalDataMate.data
    this.init()
  },
  methods: {
    init() {
      if (this.$route.query.filter) {
        this.filters = JSON.parse(this.$route.query.filter)
        this.city = this.$route.query.city_name
        this.getData({ id: this.filters.id, name: this.filters.name }, true)
      }
    },
    getCity(city) {
      this.city = city
      this.$router.push({ query: { filter: JSON.stringify(this.filters), city_name: this.city }})
      this.isCitys(1)
    },
    getData({ id, name }, isfalse) {
      if (Array.isArray(name)) {
        this.projectName = name[name.length - 1]
      } else {
        this.projectName = name
      }
      if (!isfalse) {
        const obj = {
          name,
          id
        }
        this.filters = obj
        this.$router.push({ query: { filter: JSON.stringify(obj), city_name: this.city }})
        this.classId = id && id.length ? id[id.length - 1] : ''
        this.isCitys(1)
      } else {
        this.classId = id && id.length ? id[id.length - 1] : ''
        this.isCitys(1)
      }
    },
    isCitys(page) {
      this.loading = true
      this.area.user_area = this.city
      if (this.area.user_area !== '') {
        getHospitalList(this.classId, 'intelligent', 'desc', page, 5, JSON.stringify(this.area)).then((res) => {
          this.pageConfig.total = res.meta.total
          this.pageConfig.pageTotal = res.meta.last_page
          this.hospitalData = res.data
          this.loading = false
        })
      } else {
        getHospitalList(this.classId, 'intelligent', 'desc', page, 5).then((res) => {
          this.pageConfig.total = res.meta.total
          this.pageConfig.pageTotal = res.meta.last_page
          this.hospitalData = res.data
          this.loading = false
        })
      }
    },

    changeCurrentPage(page) {
      this.pageConfig.pageNo = page
      this.isCitys(page)
    }
  }, head() {
    return {
      title: `${this.projectName && this.city ? `${this.city}${this.projectName}哪个医院好_专业${this.city}${this.projectName}医院_${this.city}${this.projectName}好的医院_容猫整形网` : this.projectName ? `${this.projectName}哪个医院好_专业${this.projectName}医院_${this.projectName}好的医院_容猫整形网` : this.city ? `${this.city}哪个医院好_专业${this.city}医院_${this.city}好的医院_容猫整形网` : '哪个医院好_专业医院_好的医院_容猫整形网'}`,
      meta: [
        { hid: 'description',
          name: 'description',
          content: `${this.projectName && this.city ? `容猫整形网，汇集了专业的${this.city}${this.projectName}整形医院，提供整形美容医院个人资料，擅长手术，案例信息，口碑评价等内容，帮助求美者选择放心医院。` : this.projectName ? `容猫整形网，汇集了专业的${this.projectName}整形医院，提供整形美容医院个人资料，擅长手术，案例信息，口碑评价等内容，帮助求美者选择放心医院。` : this.city ? `容猫整形网，汇集了专业的${this.city}整形医院，提供整形美容医院个人资料，擅长手术，案例信息，口碑评价等内容，帮助求美者选择放心医院。` : '容猫整形网，汇集了专业的整形医院，提供整形美容医院个人资料，擅长手术，案例信息，口碑评价等内容，帮助求美者选择放心医院。'}`
        }, {
          name: 'keywords', content: `${this.projectName && this.city ? `${this.city}${this.projectName}好的医院,专业${this.city}${this.projectName}医院,${this.city}${this.projectName}医院哪个好` : this.projectName ? `${this.projectName}好的医院,专业${this.projectName}医院,${this.projectName}医院哪个好` : this.city ? `${this.city}好的医院,${this.city}医院,${this.city}医院哪个好` : '好的医院,专业医院,医院哪个好'}`
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: `https://m.rongcat.com/hospital`
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.hospital-list {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  padding-bottom: 20px;
  overflow: hidden;
  .hospital-list-wrap {
    width: 1190px;
    margin: 0 auto;
  }
}
.hospital-list-content {
  display: flex;
  margin-top: 10px;
  .hospital-list-content-left {
    width: 840px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    padding: 10px 0px 30px;
    .hospital-list-content-item{
      width: 100%;
    }
  }
  .hospital-list-content-right {
    width: 340px;
    height: 591px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    margin-left: 10px;
    .hospital-list-content-hospital {
      width: 340px;
      height: 591px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      padding: 0 15px;
      justify-content: space-between;
      .hospital-list-contetn-hospital-title {
        width: 100%;
        height: 22px;
        display: flex;
        justify-content: space-between;
        .hospital-list-content-hospital-left {
          display: flex;
          align-items: center;
        }
        .hospital-list-content-hospital-left-icon {
          width: 12px;
          height: 14px;
          background: url("~assets/img/doctor-icons.png") center center
            no-repeat;
          background-size: 100% 100%;
          margin-right: 8px;
        }
        .hospital-list-content-hospital-left-text {
          font-size: 16px;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
          line-height: 22px;
        }
        .hospital-list-content-hospital-right {
          display: flex;
          align-items: center;
          .hospital-list-content-hospital-right-text {
            font-size: 16px;
            font-weight: 600;
            color: rgba(216, 216, 216, 1);
            line-height: 22px;
          }
          .hospital-list-content-hospital-right-icon {
            width: 8px;
            height: 8px;
            background: url("~assets/img/more-icon.png") center center no-repeat;
            background-size: 100% 100%;
            margin-left: 4px;
          }
        }
      }
      .hospital-list-content-hospital-item:hover{
        cursor: pointer;
      }
      .hospital-list-content-hospital-item {
        width: 150px;
        height: 120px;
        margin-top: 10px;
      }
    }
  }
}
.hospital-noData {
  width: 840px;
  height: 790px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  position: relative;
  .hospital-noData-content {
    width: 242px;
    height: 210px;
    position: absolute;
    left: 50%;
    top:150px;
    margin-left: -121px;
    > img {
      width: 242px;
      height: 191px;
    }
    .hospital-noData-content-text{
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:20px;
      text-align: center;
    }
  }
}
</style>
